CSS Flexbox: A Complete Guide with Examples |
您所在的位置:网站首页 › complete guide to css flexbox › CSS Flexbox: A Complete Guide with Examples |
In this article, we will cover what Flexbox is, a few applications where flexbox is used, how to get started with flexbox, and what properties are available to use. In case that you don't know exactly how the content in your webpage is going to look at the end, but you want to have a clean project where all the items are fitted perfectly, learn that flexbox is the ideal layout system that you would want to use. We hope that this article will come in handy to realize beautiful projects. 1. What is Flexbox?The Flexible Box Module, generally referred to as Flexbox, was introduced in 2009 as a new way to organize elements easily and to design responsive web pages. In the following years, it gained so much popularity that today is used as the main layout system for most web pages. In order to have this module applied to your project, you will have to create a main container and use the display: flex property on it. Flexbox layout is appreciated because it allows building designs based on two axes: the main axis and the cross axis. This feature gives the container the power to dynamically set the width/height of its items in order to fill all the available space. How Flexbox 'works' ![]() If you want to check on which browsers and versions Flexbox is supported, you can have a look at https://caniuse.com/?search=flexbox. ![]() This open-source front-end toolkit helps you design and customize responsive web pages using Sass variables and mixings, a responsive grid system, and more. The pre-build full suite of responsive flexbox utilities gives you the power to manage the layout, alignment, sizing of grid columns, and many others, making Bootstrap one of the most popular CSS frameworks. If you want to create complex and innovative designs, check our latest Premium Bootstrap 5 UI Kit: https://www.creative-tim.com/product/soft-ui-design-system-pro TailwindcssThis utility-first CSS framework based on Flexbox helps you to build any design directly in your markup. Its biggest advantage is that you can rapidly create modern websites without leaving your HTML code. It’s also easy to customize and adapt to any design. If you need a components library for tailwind css, you can check the below product: https://www.creative-tim.com/product/notus-pro-react BulmaThis open-source CSS framework is built with Sass, and it’s based on Flexbox. Among its advantages is that it’s available for free and be used to build 100% responsive web pages. It’s also fully modular, which allows you to import only what you need from the 29 SASS files that you can import individually. 3. Get started with FlexboxIn the next section, we will show you how to use Flexbox by presenting its properties and the most commonly used values for them, structured into categories. Firstly, we will cover the properties that apply to the parent (container), and then we will move on to the ones applying to the children (items). 3.1. Parent properties (container)display In order to get started with Flexbox, first, you will need to set the container's display property to flex. display: flex; property example ![]() Syntax: .container { display: flex; }or .container { display: inline-flex; }flex-direction This property allows you to decide on the main axis direction in your container. By default, the main axis is from left to right. flex-direction: row-reverse; property example ![]() Syntax: .container { flex-direction: row | row-reverse | column | column-reverse; } row (default): left to right row-reverse: right to left column: top to bottom column-reverse: bottom to topjustify-content Determines how the actual element (content) is distributed across the main axis. justify-content: flex-end; property example ![]() Syntax: .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } flex-start (default): items are moved toward the start of the main axis flex-end: items are moved toward the end of the main axis center: items are centered along the main axis space-between: items are evenly distributed along the main axis, with the mention that the first and the last items are pushed to the extremities of the main axis space-around: items are evenly distributed along the main axis, with the mention that all the items have equal space on both sides, which will visually create unequal space between the items space-evenly: items are evenly distributed along the main axis, with the mention that all the spaces will be equal (including the spaces from the extremities to the item)flex-wrap It determines whether your items are going to wrap along the main axis onto a new line if it's horizontal or a new column if it's a vertical main axis. flex-wrap: nowrap; property example ![]() flex-wrap: wrap; property example ![]() Syntax: .container { flex-wrap: nowrap | wrap | wrap-reverse; } nowrap (default): all items will be on one line wrap: items will wrap onto multiple lines, from top to bottom wrap-reverse: items will wrap onto multiple lines from bottom to topalign-items This property is going to distribute the items along the cross axis. align-items: flex-start; property example ![]() align-items: flex-end; property example ![]() Syntax: .container { align-items: stretch | flex-start | flex-end | center | baseline; } stretch (default): items are stretched to fill the container flex-start: items are placed at the start of the cross axis flex-end: items are placed at the end of the cross axis center: items are centered in the cross-axis baseline: items are aligned such as their baselines alignalign-content Used to control or distribute space along the cross axis, but only when you have multiple rows or columns. align-content: center; property example ![]() Syntax: .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } flex-start: items are pushed to the start of the container flex-end: items are pushed to the end of the container center: items are centered in the container space-between: items are evenly distributed; the first line is at the start of the container while the last one is at the end space-around: items are evenly distributed with equal space around each line space-evenly: elements are evenly distributed with equal space around themgap, row-gap, column-gap This property allows you to control the space between flex items. Please note that it applies only to the space between items. gap: 25px; property example ![]() Syntax: .container { gap: 25px; /* both row-gap and column-gap */ gap: 25px 50px; /* both row-gap and column-gap */ row-gap: 25px; column-gap: 50x; } 3.2. Children Properties (items inside a container)order This property allows you to change the order of the items displayed inside a container. The default value for each item is '0'. Syntax: .item { order: 5; }flex-grow As the name suggests, this property will make the item grow to fill the container's free space. The default value for each item is '0'. Syntax: .item { flex-grow: 4; }flex-shrink This is similar to the previous property with the difference that the item will shrink, not grow, in order to fit the container's space. The default value for each item is '1'. Syntax: .item { flex-shrink: 3; }flex-basis This property will allow you to set the initial size of an item. The default value is 'auto'. Syntax: .item { flex-basis: content; }flex This is actually a shorthand property for: flex-grow, flex-shrink and flex-basis. The default value is '0 1 auto'. Syntax: .item { flex: 0 1 100px; }align-self This property allows you to override the alignment of an item even if the 'align-items' property is used. Syntax: .item { align-self: center; } ConclusionWe know that creating responsive designs and accomodating UI in different screen sizes can be a real struggle, so we hope you will find this article useful for your future projects. Flexbox can ease up your work for creating beautiful designs by manipulating the elements' width, height, and order. The process of creating the layouts for your websites will be a ‘piece of cake’ if you learn to take advantage of all the benefits that Flexbox can offer. |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |